<template>
  <!-- <div @click="fetchData">
    测试接口
  </div> -->
  <div class="page-wrap">
    <div class="chat-wrap">
      <div v-for="(item, i) in chatList" :key="i" class="com-list" :class="item.role + '-list'">
        <img v-if="item.role === 'user'" class="icon user-icon" :src="user">
        <img v-if="item.role === 'system' || item.role === 'assistant'" class="icon system-icon" :src="system">
        <div class="chat-content">{{item.role}}: {{ item.content }}</div>
      </div>
    </div>
    <div class="question-wrap">
      <el-input
        v-model="textarea"
        style=" height: 16vh"
        placeholder="Please input"
        show-word-limit
        type="textarea"
      />
      <div class="send" @click="fetchDataChat">发送</div>
    </div>
  </div>
  
  <!-- <div @click="fetchDataChat">
   chat
  </div> -->
</template>

<script setup>
import { ref , onMounted, onBeforeMount,onUnmounted, onBeforeUnmount, onActivated } from 'vue';
import { RouterLink, RouterView } from 'vue-router'
import axios from 'axios';
import user from '@/assets/icon/user.png';
import system from '@/assets/icon/system.png';
 
const chatList = ref([{
  role: 'system',
  content: '您好，请问有什么可以帮您？'
}]) // 会话列表
const textarea = ref('')

console.log('created')
onMounted(() => { console.log('onMounted') })
onBeforeMount(() => { console.log('onBeforeMount') })
onUnmounted(() => { console.log('onUnmounted') })
onBeforeUnmount(() => { console.log('onBeforeUnmount') })
onActivated(() => { console.log('onActivated') })

const API_SECRET = 'RUSyIQGxecdrhgQJtuaW:LHfFGEsnqnGFxWslVpGo'
const API_URL = 'https://spark-api-open.xf-yun.com/v1/chat/completions'; // 替换为实际的API URL

// async function fetchData() {
//   try {
//     const response = await axios.post('/api/users', {
//       name: 'gg1',
//       email: 'gg1@ww',
//       password: 'gg1'
//     }, );
//     console.log('res:', response)
//   } catch (error) {
//     console.error('Error fetching data:', error);
//   }
// }

async function fetchDataChat() {
  try {
    const msg = {
      role: 'user',
      content: textarea.value
    }
    textarea.value = ''
    chatList.value.push(msg);
    await axios.post('/chat/completions', 
        {
            model: "4.0Ultra", // lite、 generalv3、 pro-128k、 generalv3.5、 max-32k、 4.0Ultra
            user: "7162207b",
            messages: chatList.value
        },
        {
            headers: {
                'Content-Type': 'application/json',
                'Authorization':'Bearer ' + API_SECRET
            }
        }
    ).then(res => {
      const data =  res.data;
      chatList.value.push(data.choices[0].message)
    })
    } catch (error) {
      console.log('chat-error:', error)
    }

  // 请求nodejs接口的方式
  // const msg = {
  //   role: 'user',
  //   content: textarea.value
  // }
  // textarea.value = ''
  // chatList.value.push(msg);
  // await axios.post('/api/chat', {
  //   messages: chatList.value
  // }, {
  //   header: {'Content-Type': 'application/json'}
  // }).then(res => {
  //   const data =  res.data;
  //   chatList.value.push(data.choices[0].message)
  // })
} 

</script>

<style lang="scss" scoped>
.page-wrap {
  // width: 100%;
  height: 100%;
  overflow: hidden;
  // background: #ccc;
}
.chat-wrap {
  // width: 1200px;
  margin: 20px auto;
  background: #fff;
  color: rgba(0,0,0,0.8);
  padding: 20px;
  border-radius: 8px;
  height: 70vh;
  overflow-y: scroll;
}
.question-wrap {
  // width: 1200px;
  margin: 20px auto;
  background: #fff;
  color: rgba(0,0,0,0.8);
  padding: 10px;
  border-radius: 8px;
  height: 20vh;
  display: flex;
  align-items: flex-end;
}
:deep(textarea) {
  height: 100%!important;
}
.send {
  margin-left: 10px;
  border: solid 1px #ccc;
  text-align: center;
  border-radius: 2px;
  font-size: 12px;
  cursor: pointer;
}
.icon {
  width: 24px;
  display: block;
  margin: 4px;
}
.user-icon {
  order: 3;
}
.system-icon {
  order: 1;
}
.com-list {
  width: 100%;
  margin-bottom: 8px;
}
.user-list {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.system-list, .assistant-list {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.chat-content {
  background: #94b6f0;
  padding: 4px 8px;
  border-radius: 4px;
  order: 2;
}
</style>
